{% extends 'base.html' %}
{% load plan_extras %}

{% block extra_head %}
<link rel="stylesheet" href="{{ MEDIA_URL }}css/jquery.autocomplete.css" type="text/css" />
<link rel="stylesheet" href="{{ MEDIA_URL }}css/thickbox.css" type="text/css" />
<link rel="stylesheet" href="{{ MEDIA_URL }}css/schedule.css" type="text/css"/>
<script type="text/javascript">
    document.plan_id = {{ plan_id }};
    document.media_url = {{ MEDIA_URL }};
</script>

<script src="{{ MEDIA_URL }}js/jquery.form.js" type="text/javascript"></script>
<script src="{{ MEDIA_URL }}js/jquery.autocomplete.js" type="text/javascript"></script>
<script src="{{ MEDIA_URL }}js/thickbox.js" type="text/javascript"></script>
<script src="{{ MEDIA_URL }}js/jquery.log.js" type="text/javascript"></script>
<script src="{{ MEDIA_URL }}js/edit_plan.js" type="text/javascript"></script>
<script src="{% url autocomplete_data %}" type="text/javascript"></script>
{% endblock extra_head %}

{% block content %}
<h2>Edit Your Planner</h2>


<div class="planTop">
    <div id="ValidationResults">
        {% include "plan/validation_results.html" %}
    </div>
</div>

<div id="Plan">
{% regroup courses by get_term_display as term_courses %} 
{% for get_term_display in term_courses %}
    <table class="plannedTerm" id="{{ get_term_display.grouper }}" width="95%">
    <tr>
        <td>
            <h2>{{ get_term_display.grouper }} <a href="{% url term_schedule forloop.counter %}?height=500&width=1070&TB_iframe=true" class="thickbox"><img src="{{ MEDIA_URL }}img/icons/calendar.png" /></a></h2>
        </td>
        <td colspan="7">
            <form id="QuickAdd" action="{% url add_course_to_plan plan_id %}"
                method="POST">
        <input type="text" name="quickadd_course" class="course_ac" length="40"/>
        <input type="hidden" name="quickadd_term" value="{{ forloop.counter }}" />
        <input type="submit" value="Add to {{ get_term_display.grouper }}"/>
        </form>
        </td>

    </tr>
    <tr>
        <th>Course Code</th>
        <th>Course Name</th>
        <th>Math</th>
        <th>Science</th>
        <th>Eng. Science</th>
        <th>Eng. Design</th>
        <th>CSE List</th>
        <th></th>
    </tr>

    {% for c in get_term_display.list %}
    <tr class="{% cycle 'rowOne' 'rowTwo' %}">
        <td>{{ c.course.short_form }} <a href="{% ugrad_calendar_link c.course.department c.course.course_code %}" target="_blank"><img src="{{ MEDIA_URL}}img/icons/help.png" alt="More information about this course"/></a><a class="thickbox" href="{% url course_schedule c.course.id %}?height=500&width=1070&TB_iframe=true" ><img src="{{ MEDIA_URL }}img/icons/calendar.png" alt="scheduling for {{ c.course.short_form }}" /></a></td>
        <td>{{ c.course.full_name }}</td>
        <td>{{ c.course.te_math }}</td>
        <td>{{ c.course.te_sci }}</td>
        <td>{{ c.course.te_engsci }}</td>
        <td>{{ c.course.te_engdes }}</td>
        <td>{{ c.course.cse }}</td>
        {% if c.course.core_course %}
        <td> <img src="{{ MEDIA_URL }}img/icons/lock.png" /> Core Course</td>
        {% else %}
        <input type="hidden" class="planned_course_id" value="{{ c.id }}"/>
        <td><a class="dropCourse" href="#"><img src="{{ MEDIA_URL}}img/icons/delete.png" /> Remove</a></td>
        {% endif %}
    </tr>
    {% endfor %}
</table>
{% endfor %}
</div>

{% endblock content %}
